<!DOCTYPE html>
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if IE 9]>         <html class="ie9 gt-ie8"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <!--<![endif]-->

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>问题生成-注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	<!-- Open Sans font from Google CDN -->
	<link href="/static/css/css.css" rel="stylesheet" type="text/css">

	<!-- LanderApp's stylesheets -->
	<link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="/static/css/landerapp.min.css" rel="stylesheet" type="text/css">
	<link href="/static/css/pages.min.css" rel="stylesheet" type="text/css">
	<link href="/static/css/rtl.min.css" rel="stylesheet" type="text/css">
	<link href="/static/css/themes.min.css" rel="stylesheet" type="text/css">

	<!--[if lt IE 9]>
		<script src="/static/assets/javascripts/ie.min.js"></script>
	<![endif]-->


<!-- $DEMO =========================================================================================

	Remove this section on production
-->
	<style>
		#signup-demo {
			position: fixed;
			right: 0;
			bottom: 0;
			z-index: 10000;
			background: rgba(0,0,0,.6);
			padding: 6px;
			border-radius: 3px;
		}
		#signup-demo img { cursor: pointer; height: 40px; }
		#signup-demo img:hover { opacity: .5; }
		#signup-demo div {
			color: #fff;
			font-size: 10px;
			font-weight: 600;
			padding-bottom: 6px;
		}
	</style>
<!-- / $DEMO -->

</head>


<!-- 1. $BODY ======================================================================================
	
	Body

	Classes:
	* 'theme-{THEME NAME}'
	* 'right-to-left'     - Sets text direction to right-to-left
-->
<body class="theme-default page-signup">

<script>
	var init = [];
</script>
<!-- Demo script --> <script src="/static/js/demo.js"></script> <!-- / Demo script -->

	<!-- Page background -->
	<div id="page-signup-bg">
		<!-- Background overlay -->
		<div class="overlay"></div>
		<!-- Replace this with your bg image -->
		<img src="/static/picture/signin-bg-1.jpg" alt="">
	</div>
	<!-- / Page background -->

	<!-- Container -->
	<div class="signup-container">
		<!-- Header -->
		<div class="signup-header">
			<a href="/" class="logo">
				自动问题生成<span style="font-weight:100;">System</span>
			</a> <!-- / .logo -->
			<div class="slogan">
				老师出题/学生答题&分析
			</div> <!-- / .slogan -->
		</div>
		<!-- / Header -->

		<!-- Form -->
		<div class="signup-form">
			<form onsubmit="return false" id="form" >
				{% csrf_token %}
                <div id="err_tips" style="display: none">
                    <span>此用户已被创建</span>
                    </div>
				<div class="signup-text">
					<span>创建一个账号</span>
				</div>

				<div class="form-group w-icon">
					<input type="text" name="userid" id="name_id" class="form-control input-lg" placeholder="用户账号">
					<span class="fa fa-info signup-form-icon"></span>
				</div>

				<div class="form-group w-icon">
					<input type="text" name="username" id="username_id" class="form-control input-lg" placeholder="用户名">
					<span class="fa fa-user signup-form-icon"></span>
				</div>

				<div class="form-group w-icon">
					<input type="text" name="email" id="email_id" onblur="limit_email(this,'邮箱')" class="form-control input-lg" placeholder="电子邮箱">
					<span class="fa fa-envelope signup-form-icon"></span>
				</div>


				<div class="form-group w-icon">
					<input type="password" name="password1" id="password_id" class="form-control input-lg" placeholder="密码">
					<span class="fa fa-lock signup-form-icon"></span>
				</div>

				<div class="form-group w-icon">
					<input type="password" name="password2" id="password_id2"  class="form-control input-lg" placeholder="再次输入密码">
					<span class="fa fa-lock signup-form-icon"></span>
				</div>

{#				<div style="margin-top:25px;margin-bottom: 15px;">#}
{#					<label class="px-single"><input type="radio" name="person" value="student" class="px"><span class="lbl"></span></label>#}
{#					&nbsp;学生&nbsp;&nbsp;#}
{#				</div>#}

				<div class="form-group w-icon">
					<div  style="width:50%; float:left;">
						<input  type="text"   name="code"  class="form-control input-lg" placeholder="验证码" required="required"/>
					</div>
                            <div style="width:30%; float:right; margin-right: 35px;" >
                                <img src="/service/showcode/" id="validate_code" onclick="show(this)" >
                            </div>
                    <script>
                        function show(it) {
                                change(it);
                        }
                        function change(it) {
                            it.src = it.src + '?';
                            }
                    </script>
				</div> <!-- / vali-code -->

				<div class="form-actions">
					<input type="submit" id="signup" value="注册" class="signup-btn bg-primary">
				</div>
			</form>
			<!-- / Form -->

			<!-- "Sign In with" block -->

			<!-- / "Sign In with" block -->
		</div>
		<!-- Right side -->
	</div>

		<div class="have-account">
		已经有账号？ <a href="/">去登陆</a>
	</div>


<!-- Get jQuery from Google CDN -->
<!--[if !IE]> -->
	<script type="text/javascript"> window.jQuery || document.write('<script src="/static/assets/javascripts/jquery.min.js">'+"<"+"/script>"); </script>
<!-- <![endif]-->
<!--[if lte IE 9]>
	<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script>
<![endif]-->


<!-- LanderApp's javascripts -->
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/landerapp.min.js"></script>

{#<script type="text/javascript" src="{% static 'js/service.js' %}"></script>#}
<script type="text/javascript">
	// Resize BG
	init.push(function () {
		$("#signup-form_id").validate({ focusInvalid: true, errorPlacement: function () {} });

		// Validate name
		$("#name_id").rules("add", {
			required: true,
			minlength: 1
		});

		// Validate email
		$("#email_id").rules("add", {
			required: true,
			email: true
		});
		
		// Validate username
		$("#username_id").rules("add", {
			required: true,
			minlength: 3
		});

		// Validate password
		$("#password_id").rules("add", {
			required: true,
			minlength: 6
		});

		$("#password_id2").rules("add", {
			required: true,
			minlength: 6,
            value:("#password_id2").valueOf()
		});


		// Validate confirm checkbox
		$("#confirm_id").rules("add", {
			required: true
		});
	});

	window.LanderApp.start(init);
</script>
<script>
    function limit_email(ob,message=null){
    var value = ob.value;
    if(value.length === 0) return false; //避免对空输入框的正则检测
    value = value.replace(/^\s*|\s*$/g,'');
    var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g
    var tag = reg.test(value);
    if(!tag){
        alert("请检查"+message+"输入格式！请输入正确格式的E-mail链接");
        return false;
    }
    return true;
}
</script>

 <script>
                $('#signup').click(function () {
                    var DATA = new FormData($("#form")[0]);
                    DATA.append('person', 'student');
                    $.ajax({
                        type: 'POST',
                        url: '/service/operate_register/',
                        dataType: 'json',
                        async: false,
                        contentType: false,
                        processData: false,
                        data: DATA,
                        success: function (response) {
                            switch (response.status) {
                                case 200:{
                                    alert("注册成功");
                                    window.location.href='/';
                                    break;
                                }
                                case 203:{
                                    var err_tips = document.getElementById('err_tips')
                                    err_tips.style.display="block";
                                    vali_code = document.getElementById('validate_code')
                                    change(vali_code);
                                    setTimeout(function(){err_tips.style.display="none";},3000);
                                    break;
                                }
                                case 100:{
                                    alert("密码错误，请重新输入");
                                    window.location.reload();
                                    break;
                                }
                                case 103:{
                                    alert("验证码错误，请重新输入");
                                    vali_code = document.getElementById('validate_code');
                                    change(vali_code);
                                    change(document.getElementsByTagName('img'));
                                    break;
                                }
                                default: {
                                    alert("请求错误");
                                    location.reload();
                                    break;
                                }
                            }
                        },
                        error : function() {
                                alert("异常！");
                            }
                    })
                })
                </script>

</body>
</html>
